<script lang="tsx">
/**
 * 登录
 */
export default {
  name: "login"
}
</script>

<script lang="tsx" setup>
import {nextTick, onMounted, ref} from "vue"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import {processRequest, token, VerificationCode} from "@/framework"
import {FRAME_APIS} from "@/frame/apis"
import {md5} from "js-md5"

/**
 * 定义router
 */
const router = useRouter()

/**
 * 验证码组件
 */
const verificationCodeRef = ref()

/**
 * 账号、密码
 */
const account = ref("admin")
const password = ref()
const code = ref()
const handleClick = async () => {
  if (account.value == null) {
    ElMessage.error("账号不可为空!")
    return false
  }
  if (password.value == null) {
    ElMessage.error("密码不可为空!")
    return false
  }
  if (code.value == null) {
    ElMessage.error("验证码不可为空!")
    return false
  }
  const verificationCode = verificationCodeRef.value.getValue()
  if (verificationCode != code.value) {
    code.value = ""
    ElMessage.error("验证码不正确!")
    await verificationCodeRef.value.handleRefresh()
    return false
  }
  const result = await processRequest.post(FRAME_APIS.LOGIN_BASE,
      {
        account: account.value,
        password: md5(password.value)
      })
  token.set(result)
  ElMessage.success("登录成功")
  await router.push("/")
}

/**
 * 切换密码显示方式
 */
const active = ref(true)
const handleShowPassWord = () => {
  active.value = !active.value
}

/**
 * 跳转至网站
 */
const handleWebsite = () => {
  window.open("https://yuyiting.work")
}

/**
 * 跳转至备案
 */
const handleICP = () => {
  window.open("https://beian.miit.gov.cn")
}

/**
 * 自动设置验证码
 */
nextTick(() => {
  code.value = verificationCodeRef.value.getValue()
})

/**
 * 全局配置
 */
const globalData = ref({
  projectName: "",
  projectLogo: ""
})
const getGlobalData = async () => {
  const result = await processRequest.get("/api/SystemConfig", {
    pageSize: 9999
  })
  globalData.value = {
    projectName: result.dataList.find((item: any) => item.id === 'A736EC70-DB40-4965-9B40-76F88213797A')?.content,
    projectLogo: result.dataList.find((item: any) => item.id === 'EEC8E7E3-4FFE-451F-BF7D-9A87C2158E2D')?.content
  }
}

/**
 * 挂载时运行
 */
onMounted(() => {
  getGlobalData()
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-icon">
    </div>
    <div class="page-container">
      <div class="container-header">
        <img v-if="globalData.projectLogo" :src="globalData.projectLogo" alt="" class="header-icon"/>
        <div v-else class="header-text">{{
            globalData?.projectName ? globalData.projectName.substring(0, 1) : "后"
          }}
        </div>
        <div class="header-title">
          {{ globalData?.projectName || "后台管理系统" }}
        </div>
      </div>
      <div class="container-title">
        账号登录
      </div>
      <div class="container-form">
        <div class="form-item">
          <img alt="" class="item-img" src="/img/frame/login/login-user.svg"/>
          <el-input v-model="account" clearable placeholder="用户名 / 邮箱" type="text"/>
        </div>
        <div class="form-item">
          <img alt="" class="item-img" src="/img/frame/login/login-lock.svg"/>
          <el-input v-model="password" :type="active ? 'password' : 'text'" clearable placeholder="密码"/>
          <img :src="active ? '/img/frame/login/login-eye-active.svg' : '/img/frame/login/login-eye-close.svg'  " alt=""
               class="item-img"
               @click="handleShowPassWord"/>
        </div>
        <div class="form-code">
          <div class="form-item">
            <img alt="" class="item-img" src="/img/frame/login/login-test.svg"/>
            <el-input v-model="code" placeholder="验证码" type="text"/>
          </div>
          <div class="form-code-logout">
            <VerificationCode ref="verificationCodeRef" :height="40" :isRem="true" :maxFontSize="45" :minFontSize="25"
                              :width="180"/>
          </div>
        </div>
      </div>
      <div class="container-login">
        <el-button type="primary" @click="handleClick">登录</el-button>
      </div>
    </div>
    <div class="page-footer">
      <div class="footer-copyright" @click="handleWebsite">
        Copyright© 2024-2025 yuyiting.work 版权所有
      </div>
      <div class="footer-ICP" @click="handleICP">
        浙ICP备2024088835号-1
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">
</style>